<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div id="app">
    <div class="header">
      <div class="download-app-go">
        <img src="./images/download-app.png" alt="">
        <div class="close"></div>
      </div>
      <div class="header-main">
        <div class="header-search">
          <div class="logo">
            <img src="./images/logo-1.png" alt="">
          </div>
          <div class="search">搜索商品名称</div>
          <div class="mine">
            <img src="./images/mine.png" alt="">
          </div>
        </div>
        <div class="header-nav">
          <ul class="nav-1">
            <li class="nav-current"><span>推荐</span></li>
            <li><span>电视</span></li>
            <li><span>智能</span></li>
            <li><span>家电</span></li>
            <li><span>笔记本</span></li>
          </ul>
          <div class="more"></div>
        </div>
      </div>
    </div>
    <div class="banner">
      <img src="./upload/banner-01.jpeg" alt="">
      <ul class="circle">
        <li class="circle-current"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="nav-2">
      <span class="nav-2-item"><img src="./images/nav2-icon1.webp" alt=""></span>
      <span class="nav-2-item"><img src="./images/nav2-icon2.webp" alt=""></span>
      <span class="nav-2-item"><img src="./images/nav2-icon3.webp" alt=""></span>
      <span class="nav-2-item"><img src="./images/nav2-icon4.webp" alt=""></span>
      <span class="nav-2-item"><img src="./images/nav2-icon5.webp" alt=""></span>
      <span class="nav-2-item"><img src="./images/nav2-icon6.webp" alt=""></span>
      <span class="nav-2-item"><img src="./images/nav2-icon7.webp" alt=""></span></span>
      <span class="nav-2-item"><img src="./images/nav2-icon8.webp" alt=""></span>
      <span class="nav-2-item"><img src="./images/nav2-icon9.webp" alt=""></span>
      <span class="nav-2-item"><img src="./images/nav2-icon10.webp" alt=""></span>
    </div>
    <div class="recommend">
      <div class="recommend-list1">
        <div class="product-large">
          <img src="./upload/recommend-list1-1.webp" alt="">
        </div>
        <div class="product-small">
          <span style="border-bottom: 2px solid #fff;"><img src="./upload/recommend-list1-2.webp" alt=""></span>
          <span><img src="./upload/recommend-list1-3.webp" alt=""></span>
        </div>
      </div>
      <div class="recommend-list2">
        <img src="./upload/recommend-list2-1.webp" alt="">
      </div>
      <div class="recommend-list3">
        <span>
          <img src="./upload/product-phone1.jpg" alt="">
          <div class="direction">
            <h1 class="title">K50 电竞版</h1>
            <p class="con">全线拉满的冷血旗舰</p>
            <p class="price">3299<span>起</span></p>
            <a href="#" class="buy">立即购买</a>
          </div>
        </span>
        <span>
          <img src="./upload/product-phone2.jpg" alt="">
          <div class="direction">
            <h1 class="title">Redmi Note 11 5G</h1>
            <p class="con">5000mAh大电量</p>
            <p class="price">1199<span>起</span></p>
            <a href="#" class="buy">立即购买</a>
          </div>
        </span>
        <span>
          <img src="./upload/product-phone3.jpg" alt="">
          <div class="direction">
            <h1 class="title">Xiaomi 12 Pro</h1>
            <p class="con">全新骁龙8｜2K AMOLED屏幕</p>
            <p class="price">4699<span>起</span></p>
            <a href="#" class="buy">立即购买</a>
          </div>
        </span>
        <span>
          <img src="./upload/product-phone4.jpg" alt="">
          <div class="direction">
            <h1 class="title">Note 11 Pro系列</h1>
            <p class="con">三星AMOLED高刷屏</p>
            <p class="price">1799<span>起</span></p>
            <a href="#" class="buy">立即购买</a>
          </div>
        </span>
      </div>
      <div class="recommend-footer">
        <span>更多小米手机产品 ></span>
      </div>
      <div class="distance"></div>
    </div>
    <div class="footer">
      <span class="home" target="footer-current-icon">
        <div class="icon"></div>首页
      </span>
      <span>
        <div class="icon"></div>分类
      </span>
      <span>
        <div class="icon"></div>米圈
      </span>
      <span>
        <div class="icon"></div>购物车
      </span>
      <span class="personal">
        <div class="icon"></div>我的
      </span>
    </div>
  </div>
</body>

<script src="./js/project.js"></script>

</html>